<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>2.computed实现</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo">
      <input type="text" v-model="keyword">
      <ul>
        <li v-for="p in persons2" :key="p.id">{{p.name}}-{{p.age}}-{{p.gender}}</li>
      </ul>
    </div>

    <script type="text/javascript">
      new Vue({
        el:'#demo',
        data:{
          keyword:'',
          persons:[
            {id:'asdfytasfu01',name:'周冬雨',age:31,gender:'女'},
            {id:'asdfytasfu02',name:'马冬梅',age:56,gender:'女'},
            {id:'asdfytasfu03',name:'周杰伦',age:44,gender:'男'},
            {id:'asdfytasfu04',name:'温兆伦',age:58,gender:'男'},
          ],
        },
        computed:{
          persons2(){
            return this.persons.filter((item)=>{
              return item.name.includes(this.keyword)
            })
          }
        }
      })
    </script>
  </body>
</html>